<template>
	<div class="coursenav">
		<ul>
			<li v-for="(v,i) in arr" :key="i">
				<span :class="v.class"></span>
				<p>{{v.title}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				arr:[
					{"class":"iconfont icon-shuben","title":"教育专区"},
					{"class":"iconfont icon-ziliao1","title":"专业资料"},
					{"class":"iconfont icon-ziliao","title":"实用文档"},
					{"class":"iconfont icon-lvzhi","title":"生活休闲"},
				]
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.coursenav{
		ul{
			width: 100%;
			background-color: #FFFFFF;
			height: 0.8rem;
			display: flex;
			justify-content: space-around;
			li{
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				span{
					font-size: 0.24rem;
					margin-top: -0.1rem;
				}
				p{
					font-size: 0.14rem;
				}
			}
		}
	}
</style>
